.amountInputContainer {
  width: 100%;
  height: max-content;

  .inputContainer {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: max-content 1fr 40px;
    align-items: center;
    height: 46px;
    padding: 15px 5px;
    background: $white;
    border-radius: $borderRadiusMd;
    box-shadow: $inputContainerShadow;
    transition: background-color .2s ease;

    .pre {
      display: flex;
      align-items: center;
      justify-content: center;
      width: max-content;
      min-width: 75px;
      height: 100%;
      color: $violet;
      font-weight: 600;
      font-size: 18px;
      font-family: $openSans;
      border-right: 2px solid $purple;

      img {
        width: auto;
        height: 100%;
        margin-right: 6px;
      }
    }

    input {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 0 15px;
      color: $purpleDark;
      font-weight: 600;
      font-size: $fontSizeRegular;
      font-family: $openSans;
      text-align: left;
      background-color: $tempTransparent;
      border: none;
      outline: none !important;
      transition: color .2s ease;

      &::placeholder {
        color: $gray;
        font-weight: 600;
      }
    }

    .append {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: $violet;
      font-size: $fontSizeRegular;
      border-left: 2px solid $purple;
      transition: color .2s ease, border-color .2s ease;
    }
  }

  &.status- {
    &disabled .inputContainer,
    &loading .inputContainer {
      background-color: $lighterGray !important;

      .append {
        border-color: $gray !important;
      }
    }

    &error .inputContainer {
      background-color: $redBg;

      input {
        color: $red;
      }

      .append {
        color: $red;
        border-color: $red;
      }
    }

    &success .inputContainer {
      input {
        color: $green;
      }

      .append {
        color: $green;
        border-color: $green;
      }
    }
  }

  .hints {
    display: grid;
    grid-auto-rows: max-content;
    grid-auto-flow: row;
    grid-gap: 5px;
    grid-template-columns: 100%;
    width: 100%;
    height: max-content;
    margin-top: 10px;
  }
}

.spin-animation,
.ri-loader-5-line {
  display: inline-block;
  animation: spin 0.5s linear 0s infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
